<template>
	<view class="content">
		<view class="logobox">
			<image src="../../static/login/健身房.png" mode=""></image>
		</view>
		<uni-title title="健身预约系统" type="h2" align="center" class="titlebox"></uni-title>
		<view class="form-box">
			<view class="form-item">
				<label for="">手机号</label>
				<input type="text" placeholder="请输入手机号" v-model="account">
			</view>
			<view class="form-item">
				<label for="">动态码</label>
				<input type="text" v-model="password" placeholder="请输入动态码">
			</view>
			<label class="radio">
				<radio :checked="ischeck" @click="handleClick"/>
				<text>勾选同意</text><text @click="gotoUserAgreement">《用户协议》</text><text>和</text><text @click="gotoUserPolicy">《隐私政策》</text>
			</label>
			<view class="registered" @click="goRegistered">
				注册
			</view>
			<button type="default" hover-class="none" @click="goHome"> 登录</button>
		</view>
	</view>
</template>

<script>
	import {
		reactive,toRefs,computed
	} from 'vue'
	import { mapMutations } from 'vuex'
	import store from '../../store/index.js'
	import { onShow } from '@dcloudio/uni-app'
	import myRequest from '../../utils/myRequest.js'
	export default {
		setup() {
			let data = reactive({
				account: '123456',
				password: '123456',
				ischeck: true,
				gotoUserAgreement () {
					uni.navigateTo({
						url:'AgreementPolicy/agreement'
					})
				},
				gotoUserPolicy () {
					uni.navigateTo({
						url:'AgreementPolicy/policy'
					})
				},
				handleClick() {
					data.ischeck = true
				},
				goHome () {
					if(!data.ischeck){
						uni.showToast({
							title:'请勾选协议',
							duration:1500,
						})
						return
					}
					uni.showLoading({
						title:'正在登陆'
					})
					setTimeout(()=>{
						uni.hideLoading()
						let userdata = {
							account:data.account,
							password:data.password
						}
						myRequest({
							url:'/userlogin',
							data:userdata,
						}).then(res=>{
							console.log(res)
							if(res.data.code==200){
								store.commit('editUserData',res.data.data)
								uni.setStorageSync('token',res.data.token)
								uni.switchTab({
									url:'../Home/Home'
								})
							}
						})
					},1500)
				},
				//微信登录
				wxLogin() {
					uni.login({
						provider:'weixin',
						success(res) {
							console.log(code)
						}
					})
					uni.getUserInfo({
						provider:'weixin',
						success(res) {
							console.log(res)
						}
					})
				},
				//go注册
				goRegistered () {
					uni.navigateTo({
						url:'Registered'
					})
				}
			})
			onShow(function(){
				console.log(store.state.userdata)
			})
			
			return {
				...toRefs(data),
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 50px 30rpx;
		display: flex;
		flex-direction: column;
	}

	.logobox {
		background-color: #1E9FFF;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		border: none;
		text-align: center;
		position: relative;
		margin: 0 auto 50rpx;

		image {
			width: 80%;
			height: 80%;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
	}

	.form-item {
		display: flex;
		justify-content: space-between;
		border-radius: 20px;
		border: 1px solid #E4E4E4;
		padding: 8px 15px;
		box-sizing: border-box;
		margin-top: 50rpx;

		label {
			width: 20%;
			color: #A6A6C4;
		}

		input {
			width: 80%;
		}
	}

	.radio {
		display: flex;
		justify-content: center;
		font-size: 14px;
		margin-top: 30rpx;
		>text:nth-of-type(2n){
			color: #0079FE;
		}
	}
	button {
		background-color: #1A8BDF;
		color: #FFFFFF;
		font-size: 16px;
		margin-top: 30rpx;
		font-weight: bold;
	}
	.registered {
		font-size: 28rpx;
		text-align: center;
		text-decoration: underline;
		color: #1A8BDF;
	}
</style>
